<template>
  <div class="category">
    <van-nav-bar 
      title="商品分类" 
      fixed
    />
    
    <div class="content" style="padding-top: 46px;">
      <div class="category-layout">
        <!-- 左侧分类导航 -->
        <van-sidebar v-model="activeCategory" class="sidebar">
          <van-sidebar-item 
            v-for="category in categories" 
            :key="category.id" 
            :title="category.name"
          />
        </van-sidebar>

        <!-- 右侧商品列表 -->
        <div class="products">
          <!-- 二级分类 -->
          <div class="sub-categories">
            <div 
              v-for="subCat in currentCategory.children" 
              :key="subCat.id"
              class="sub-category"
              @click="selectSubCategory(subCat)"
            >
              <img :src="subCat.image" :alt="subCat.name">
              <span>{{ subCat.name }}</span>
            </div>
          </div>

          <!-- 商品列表 -->
          <van-grid :column-num="2" :gutter="10">
            <van-grid-item 
              v-for="product in currentProducts" 
              :key="product.id"
              @click="goToDetail(product.id)"
            >
              <img :src="product.image" :alt="product.title">
              <div class="product-info">
                <div class="title">{{ product.title }}</div>
                <div class="price">¥{{ product.price }}</div>
              </div>
            </van-grid-item>
          </van-grid>
        </div>
      </div>
    </div>
    
    <!-- 底部导航 -->
    <van-tabbar v-model="active" route>
      <van-tabbar-item icon="home-o" to="/">首页</van-tabbar-item>
      <van-tabbar-item icon="apps-o" to="/category">分类</van-tabbar-item>
      <van-tabbar-item icon="cart-o" :badge="cartCount" to="/cart">购物车</van-tabbar-item>
      <van-tabbar-item icon="orders-o" to="/order">订单</van-tabbar-item>
    </van-tabbar>
  </div>
</template>

<script>
import { getCategories } from '@/api'
import { mapState } from 'vuex'

export default {
  name: 'Category',
  data() {
    return {
      active: 1, // 默认选中分类标签
      activeCategory: 0,
      categories: [],
      currentSubCategory: null
    }
  },
  computed: {
    ...mapState({
      cartList: state => state.cartList
    }),
    cartCount() {
      return this.cartList.length || ''
    },
    currentCategory() {
      return this.categories[this.activeCategory] || { children: [] }
    },
    currentProducts() {
      if (this.currentSubCategory) {
        return this.currentSubCategory.products
      }
      const firstChild = this.currentCategory.children[0]
      return firstChild ? firstChild.products : []
    }
  },
  created() {
    this.fetchData()
  },
  methods: {
    async fetchData() {
      try {
        const res = await getCategories()
        if (res.code === 0) {
          this.categories = res.data
        }
      } catch (error) {
        console.error(error)
      }
    },
    selectSubCategory(subCategory) {
      this.currentSubCategory = subCategory
    },
    goToDetail(id) {
      this.$router.push({
        path: `/product/${id}`,
        query: { from: 'category' }
      })
    }
  }
}
</script>

<style scoped>
.category-layout {
  display: flex;
  height: calc(100vh - 146px);
}

.sidebar {
  flex: none;
  width: 85px;
  background: #f7f7f7;
}

.products {
  flex: 1;
  overflow-y: auto;
  padding: 10px;
  background: #fff;
}

.sub-categories {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 15px;
  padding: 15px;
}

.sub-category {
  text-align: center;
}

.sub-category img {
  width: 60px;
  height: 60px;
  margin-bottom: 5px;
}

.sub-category span {
  font-size: 12px;
  color: #333;
}

.product-info {
  padding: 8px;
  text-align: center;
}

.product-info .title {
  font-size: 14px;
  color: #333;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.product-info .price {
  color: #ff6700;
  font-size: 16px;
  margin-top: 5px;
}

.van-grid-item img {
  width: 100%;
  height: 150px;
  object-fit: cover;
}
</style> 